<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>设置我的资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/css/base.css?v={$version}">
    <script src="/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">设置我的资料</div>
                    <div class="layui-card-body" pad15>

                        <div class="layui-form" lay-filter="">
                            <input type="hidden" name="id" value="{$data.id}">
                            <div class="layui-form-item page-row">
                                <label class="layui-form-label flex-col-md-3">账号</label>
                                <div class="layui-input-inline flex-col-md-7">
                                    <input type="text" value="{$data.username}" readonly class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">不可修改。</div>
                            </div>
                            <div class="layui-form-item page-row">
                                <label class="layui-form-label flex-col-md-3">昵称</label>
                                <div class="layui-input-inline flex-col-md-7">
                                    <input type="text" name="name" value="{$data.name}" lay-verify="nickname"
                                        autocomplete="off" placeholder="请输入昵称" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item page-row">
                                <label class="layui-form-label flex-col-md-3">性别</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="sex" value="1" title="男" {if $data.sex==1} checked {/if}>
                                    <input type="radio" name="sex" value="2" title="女" {if $data.sex==2} checked {/if}>
                                </div>
                            </div>
                            <div class="layui-form-item page-row">
                                <label class="layui-form-label flex-col-md-3">头像</label>
                                <div class="layui-input-inline flex-col-md-7">
                                    <input lay-verify="required" name="image" id="LAY_avatarSrc" placeholder="图片地址"
                                        value="{$data.image}" class="layui-input">
                                </div>
                                <!--                            <div class="layui-input-inline flex-col-md-7 layui-btn-container" style="width: auto;">-->
                                <button type="button" class="layui-btn layui-btn-primary" id="LAY_avatarUpload">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <button class="layui-btn layui-btn-primary"
                                    layadmin-event="avartatPreview">查看图片</button>
                                <!--                            </div>-->
                            </div>
                            <div class="layui-form-item page-row">
                                <label class="layui-form-label flex-col-md-3">手机</label>
                                <div class="layui-input-inline flex-col-md-7">
                                    <input type="text" name="tel" value="{$data.tel}" lay-verify="phone"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item page-row">
                                <label class="layui-form-label flex-col-md-3">邮箱</label>
                                <div class="layui-input-inline flex-col-md-7">
                                    <input type="text" name="email" value="{$data.email}" lay-verify="email"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item page-row">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="setmyinfo">确认修改</button>
                                    <!--<button type="reset" class="layui-btn layui-btn-primary">重新填写</button>-->
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        layui.config({
            base: '/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form', 'layer', 'upload'], function () {
            var $ = layui.$
                , layer = layui.layer
                , form = layui.form
                , admin = layui.admin
                , upload = layui.upload
            //自定义验证
            form.verify({
                nickname: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                }
            });
            var avatarSrc = $('#LAY_avatarSrc');
            upload.render({
                url: "{:url('file_y')}"
                , elem: '#LAY_avatarUpload'
                , done: function (res) {
                    if (res.code == 200) {
                        layer.msg('上传成功');
                        $(this.item).prev("div").children("input").eq(0).val(res.data.file)
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
            admin.events.avartatPreview = function (othis) {
                var src = avatarSrc.val();
                layer.photos({
                    photos: {
                        "title": "查看头像" //相册标题
                        , "data": [{
                            "src": src //原图地址
                        }]
                    }
                    , shade: 0.01
                    , closeBtn: 1
                    , anim: 5
                });
            };
            //设置我的资料
            form.on('submit(setmyinfo)', function (obj) {
                //提交修改
                $.ajax({
                    'url': "{:url('upload_ajax')}",
                    'method': 'POST',
                    'data': obj.field,
                    'success': function (res) {
                        if (res.code == 200) {
                            layer.msg('修改成功', {
                                time: 1500 //2秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                //关闭当前页
                                var topAdmin = parent === self ? admin : parent.layui.admin;
                                topAdmin.closeThisTabs();
                            });
                        } else {
                            layer.msg(res.message);
                        }
                    }
                });
                return false;
            });
        });
    </script>
</body>

</html>